import React, { useState, useRef } from 'react'
import { LoadingOutlined, PlusOutlined, EditOutlined } from '@ant-design/icons';
import { Upload, message, Radio } from 'antd';
import '../../../../assets/styles/mineInfo.less'
import auth from '../../../../apis/modules/auth'
// const getBase64 = (img, callback) => {
//   const reader = new FileReader();
//   reader.addEventListener('load', () => callback(reader.result));
//   reader.readAsDataURL(img);
// };
// const beforeUpload = (file) => {
//   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//   if (!isJpgOrPng) {
//     message.error('You can only upload JPG/PNG file!');
//   }
//   const isLt2M = file.size / 1024 / 1024 < 2;
//   if (!isLt2M) {
//     message.error('Image must smaller than 2MB!');
//   }
//   return isJpgOrPng && isLt2M;
// };
export default function MineInfo() {
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const [value, setValue] = useState(1);
  //控制是否开启文本框
  let [flage, setFlage] = useState(true)
  //修改用户名的节点
  const nickRef = useRef()
  const emailRef = useRef()
  const cityRef = useRef()
  const Info = JSON.parse(localStorage.userInfo)
  const [userInfo, setUserInfo] = useState(Info)
  const token = localStorage.token
  const onChange = (e) => {
    // console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  // console.log(username);
  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      setLoading(false);
      setImageUrl(url);
      // getBase64(info.file.originFileObj, (url) => {

      // });
    }
  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <EditOutlined className='info_icon' />}
      <div
        style={{
          marginTop: 8,
        }}
      >
      </div>
    </div>
  );
  const blur = () => {
    setFlage(true)
  }
  const changeInfo = (name) => {
    setFlage(!flage)
    switch (name) {
      case 'email':
        userInfo.email = ' '
        setUserInfo(userInfo)
        console.log(nickRef);
    }
  }
  return (
    <div className='info_box'>
      <div className='info_left'>
        <Upload
          name="avatar"
          listType="picture-circle"
          className="info_photo"
          showUploadList={false}
          action="http://140.246.58.4:8090/file/upload"
          // beforeUpload={beforeUpload}
          onChange={handleChange}
        >
          {imageUrl ? (
            <img
              src={imageUrl}
              alt="avatar"
              style={{
                width: '2.775rem',
                height: '2.775rem'
              }}
            />
          ) : (
            uploadButton
          )}
        </Upload>
      </div>
      <div className='info_right'>
        <div className='info_title'>基本信息</div>
        <div className='info_item'>
          <div className='nick_name'>用户昵称</div>
          <div className='content_right_Box'>
            <div className='username'><input onBlur={blur} ref={nickRef} disabled={flage} defaultValue={userInfo.account} type="text" /></div>
            <div className='change_btn' onClick={() => changeInfo('account')}>修改</div>
          </div>
        </div>
        <div className='info_item'>
          <div className='nick_name'>手机号&nbsp;&nbsp;&nbsp;</div>
          <div className='content_right_Box'>
            <div className='username'><input disabled value={userInfo.phone} type="text" /></div>
            <div className='change_btn'>已绑定</div>
            <div>仅自己可见</div>
          </div>
        </div>
        <div className='info_item'>
          <div className='content_right_Box'>
            <div className='nick_name'>邮箱&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;</div>
            {userInfo.email ? <div ref={emailRef} className='username'><input disabled={flage} defaultValue={userInfo.email ? userInfo.email : ''} type="text" /></div> : ''}
            <div className='change_btn' onClick={() => changeInfo('email')}>去绑定</div>
            <div>仅自己可见</div>
          </div>

        </div>
        <div className='info_item'>
          <div className='nick_name'>性别 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
          <div className='content_right_Box'>
            <Radio.Group onChange={onChange} value={userInfo.gender ? userInfo.gender : value}>
              <Radio value={1}>男</Radio>
              <Radio value={2}>女</Radio>
            </Radio.Group>
          </div>

        </div>
        <div className='info_item'>
          <div className='nick_name'>所在城市</div>
          <div className='content_right_Box'>
            <div className='username'><input ref={cityRef} disabled={flage} defaultValue={userInfo.city ? userInfo.city : ''} type="text" /></div>
            <div className='change_btn' onClick={() => changeInfo('city')}>修改</div>
            <div className='save_btn'><button>保存</button></div>
          </div>

        </div>

      </div>
    </div>
  )
}